<template>
  <div>
    LENGTH:<el-input-number v-model="groupLength"></el-input-number>
    NUMBER:<el-input-number v-model="boomNum"></el-input-number>
    <el-button type="success" @click="generate">开始一局</el-button>
    Count:<el-input-number :value="countOpened"></el-input-number>

    <div class="group-five">
      <template v-for="(e, i) in core">
        <div :key="i" class="line-five">
          <template v-for="(c, j) in e">
            <div :key="i + '-' + j" class="cell-five">
              <!--              <div>{{ c }}</div>-->
              <cell-five
                :ref="i"
                v-bind="c"
                @post-click="postClickCell"
                @post-sign="postSignCell"
                :disabled="isGameOver"
              ></cell-five>
            </div>
          </template>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import CellFive from "@/components/CellFive";
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import New from './components/New.vue';
export default {
  name: "TestFive",
  components: {
    CellFive,
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  //坐标系
  //通用图形界面坐标 （）wh
  //二维数组坐标系行列式坐标系 ij
  data() {
    return {
      sampleD: "value",
      boomNum: 6,
      groupLength: 6,
      isGameOver: false,
      countOpened: 0,
      core: [
        [
          { value: 1, state: "closed", i: 0, j: 0 },
          { value: 1, state: "closed", i: 0, j: 0 },
          { value: 1, state: "closed", i: 0, j: 0 },
        ],
        [
          { value: 2, state: "closed", i: 0, j: 0 },
          { value: 5, state: "closed", i: 0, j: 0 },
          { value: 7, state: "closed", i: 0, j: 0 },
        ],
        [
          { value: 3, state: "closed", i: 0, j: 0 },
          { value: 5, state: "closed", i: 0, j: 0 },
          { value: 9, state: "closed", i: 0, j: 0 },
        ],
      ],
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    p() {
      return Math.floor(Math.random() * this.groupLength);
    },
    generate() {
      // booms 结构体：[{1,2},{2,3}]
      let booms = [];

      while (booms.length < this.boomNum) {
        let point = {
          x: this.p(),
          y: this.p(),
        };
        //如果不重复 再放进去
        let unique = true;
        for (let b of booms) {
          if (b.x === point.x && b.y === point.y) {
            unique = false;
          }
        }
        if (unique) {
          booms.push(point);
        }
      }

      // console.log(booms);
      //生成空棋盘
      let q = [];
      for (let i = 0; i < this.groupLength; i++) {
        q[i] = [];
        for (let j = 0; j < this.groupLength; j++) {
          q[i][j] = { value: -1, state: "closed", i: i, j: j };
        }
      }
      // console.log(q);
      //   埋雷 用9表示雷
      for (let boom of booms) {
        q[boom.x][boom.y].value = 9;
      }
      console.log(q);
      //标记雷数量
      for (let i = 0; i < q.length; i++) {
        jloop: for (let j = 0; j < q[i].length; j++) {
          // q[i][j];

          //  如果本身是雷 就不必赋值 直接进行下一次循环
          if (q[i][j].value === 9) {
            continue jloop;
          }

          let count = 0;
          //遍历九宫格 统计雷的个数
          for (let k = -1; k <= 1; k++) {
            lloop: for (let l = -1; l <= 1; l++) {
              if (k === 0 && l === 0) {
                continue lloop;
              }
              //先要判断有无越界
              if (q[i + k] && q[i + k][j + l]) {
                if (q[i + k][j + l].value === 9) {
                  count++;
                }
              }
            }
          }
          q[i][j].value = count;
        }
      }
      console.log(q);
      this.core = q;

      this.initGame();
    },
    postClickCell(i, j) {
      let cur = this.core[i][j];
      cur.state = "opened";
      this.countOpened++;
      //  如果是雷 结束游戏
      if (cur.value === 9) {
        this.$message.error("踩到雷了，游戏结束");
        this.gameOver();
      }

      if (this.countOpened + this.boomNum === Math.pow(this.groupLength, 2)) {
        this.$message.success("排雷胜利，游戏结束");
        this.gameOver();
      }

      //  如果是0个雷 辅助用户点击九宫格
      if (cur.value === 0) {
        for (let k = -1; k <= 1; k++) {
          for (let l = -1; l <= 1; l++) {
            if (k === 0 && l === 0) {
              continue;
            }

            //解决数组越界异常
            if (this.$refs[i + k] && this.$refs[i + k][j + l]) {
              //无异步 事件通知来不及 会卡死
              // this.$refs[i + k][j + l].click();
              //微任务队列 导致计数等不正常
              // this.$nextTick(() => {
              //   this.$refs[i + k][j + l].click();
              // });
              //宏任务队列 可以正常
              setTimeout(() => {
                this.$refs[i + k][j + l].click();
                // cur[i + k][j + l].;
              }, 10);
            }
          }
        }
      }
    },
    gameOver() {
      this.isGameOver = true;
    },
    initGame() {
      this.isGameOver = false;
      this.countOpened = 0;
    },
    postSignCell(i, j) {
      //取消雷区标记
      let cur = this.core[i][j];
      console.log(cur);

      if (cur.state === "signed") {
        cur.state = "closed";
      } else if (cur.state === "closed") {
        cur.state = "signed";
      }
      console.log(cur);
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.group-five {
}
.line-five {
  display: flex;
  padding: 0 2px;
}
.cell-five {
  padding: 2px;
}
</style>
